<template>
    <div class="pl-16px pt-16px pb-16px content-container">
        <div class="flex justify-between items-center user-info">
            <div class="flex items-center">
                <Avatar :width="60" />
                <div class="flex flex-col justify-center user-txt">                   
                    <div class="flex items-center">
                        <p>皖仪科技</p>
                        <el-dropdown>
                            <el-button type="primary" round>
                            切换网站 <svg-icon size="14px" icon-class="arrow-down-s-line"></svg-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                <el-dropdown-item>Action 1</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                                <el-dropdown-item>Action 4</el-dropdown-item>
                                <el-dropdown-item>Action 5</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <span>安徽皖仪科技股份有限公司</span>
                </div>
            </div>
            <div>
                <a href=""><img src="https://img49.chem17.com/6/20231227/638392884169843750179.gif" alt=""></a>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Avatar from '@/components/Avatar/index.vue'
</script>

<style lang="scss" scoped>
.user-info {
    .user-txt {
        text-align: left;
        margin-left: 12px;

        p {
            font-size: 20px;
            font-weight: 700;
            margin-right: 30px;
            color: var(--title-color);
        }

        span {
            font-size: 14px;
            color: #999999;
            margin-top: 10px;
        }
    }
}
</style>